/*
 * 图片转换对话框脚本
 **/

var tableData = [],
    //编辑器页面table
    editorTable = null,
    chartsConfig = window.typeConfig,
    resizeTimer = null,
    //初始默认图表类型
    currentChartType = 0;

window.onload = function () {
    editorTable = domUtils.findParentByTagName(
        editor.selection.getRange().startContainer,
        "table",
        true
    );

    //未找到表格， 显示错误页面
    if (!editorTable) {
        document.body.innerHTML =
            "<div class='edui-charts-not-data'>未找到数据</div>";
        return;
    }

    //初始化图表类型选择
    initChartsTypeView();
    renderTable(editorTable);
    initEvent();
    initUserConfig(editorTable.getAttribute("data-chart"));
    $("#scrollBed .view-box:eq(" + currentChartType + ")").trigger("click");
    updateViewType(currentChartType);

    dialog.addListener("resize", function () {
        if (resizeTimer != null) {
            window.clearTimeout(resizeTimer);
        }

        resizeTimer = window.setTimeout(function () {
            resizeTimer = null;

            renderCharts();
        }, 500);
    });
};

function initChartsTypeView() {
    var contents = [];

    for (var i = 0, len = chartsConfig.length; i < len; i++) {
        contents.push(
            '<div class="view-box" data-chart-type="' +
                i +
                '"><img width="300" src="images/charts' +
                i +
                '.png"></div>'
        );
    }

    $("#scrollBed").html(contents.join(""));
}

//渲染table， 以便用户修改数据
function renderTable(table) {
    var tableHtml = [];

    //构造数据
    for (var i = 0, row; (row = table.rows[i]); i++) {
        tableData[i] = [];
        tableHtml[i] = [];

        for (var j = 0, cell; (cell = row.cells[j]); j++) {
            var value = getCellValue(cell);

            if (i > 0 && j > 0) {
                value = +value;
            }

            if (i === 0 || j === 0) {
                tableHtml[i].push("<th>" + value + "</th>");
            } else {
                tableHtml[i].push(
                    '<td><input type="text" class="data-item" value="' +
                        value +
                        '"></td>'
                );
            }

            tableData[i][j] = value;
        }

        tableHtml[i] = tableHtml[i].join("");
    }

    //draw 表格
    $("#tableContainer").html(
        '<table id="showTable" border="1"><tbody><tr>' +
            tableHtml.join("</tr><tr>") +
            "</tr></tbody></table>"
    );
}

/*
 * 根据表格已有的图表属性初始化当前图表属性
 */
function initUserConfig(config) {
    var parsedConfig = {};

    if (!config) {
        return;
    }

    config = config.split(";");

    $.each(config, function (index, item) {
        item = item.split(":");
        parsedConfig[item[0]] = item[1];
    });

    setUserConfig(parsedConfig);
}

function initEvent() {
    var cacheValue = null,
        //图表类型数
        typeViewCount = chartsConfig.length - 1,
        $chartsTypeViewBox = $("#scrollBed .view-box");

    $(".charts-format").delegate(".format-ctrl", "change", function () {
        renderCharts();
    });

    $(".table-view")
        .delegate(".data-item", "focus", function () {
            cacheValue = this.value;
        })
        .delegate(".data-item", "blur", function () {
            if (this.value !== cacheValue) {
                renderCharts();
            }

            cacheValue = null;
        });

    $("#buttonContainer").delegate("a", "click", function (e) {
        e.preventDefault();

        if (this.getAttribute("data-title") === "prev") {
            if (currentChartType > 0) {
                currentChartType--;
                updateViewType(currentChartType);
            }
        } else {
            if (currentChartType < typeViewCount) {
                currentChartType++;
                updateViewType(currentChartType);
            }
        }
    });

    //图表类型变化
    $("#scrollBed").delegate(".view-box", "click", function (e) {
        var index = $(this).attr("data-chart-type");
        $chartsTypeViewBox.removeClass("selected");
        $($chartsTypeViewBox[index]).addClass("selected");

        currentChartType = index | 0;

        //饼图， 禁用部分配置
        if (currentChartType === chartsConfig.length - 1) {
            disableNotPieConfig();

            //启用完整配置
        } else {
            enableNotPieConfig();
        }

        renderCharts();
    });
}

function renderCharts() {
    var data = collectData();

    $("#chartsContainer").highcharts(
        $.extend({}, chartsConfig[currentChartType], {
            credits: {
                enabled: false,
            },
            exporting: {
                enabled: false,
            },
            title: {
                text: data.title,
                x: -20, //center
            },
            subtitle: {
                text: data.subTitle,
                x: -20,
            },
            xAxis: {
                title: {
                    text: data.xTitle,
                },
                categories: data.categories,
            },
            yAxis: {
                title: {
                    text: data.yTitle,
                },
                plotLines: [
                    {
                        value: 0,
                        width: 1,
                        color: "#808080",
                    },
                ],
            },
            tooltip: {
                enabled: true,
                valueSuffix: data.suffix,
            },
            legend: {
                layout: "vertical",
                align: "right",
                verticalAlign: "middle",
                borderWidth: 1,
            },
            series: data.series,
        })
    );
}

function updateViewType(index) {
    $("#scrollBed").css("marginLeft", -index * 324 + "px");
}

function collectData() {
    var form = document.forms["data-form"],
        data = null;

    if (currentChartType !== chartsConfig.length - 1) {
        data = getSeriesAndCategories();
        $.extend(data, getUserConfig());

        //饼图数据格式
    } else {
        data = getSeriesForPieChart();
        data.title = form["title"].value;
        data.suffix = form["unit"].value;
    }

    return data;
}

/**
 * 获取用户配置信息
 */
function getUserConfig() {
    var form = document.forms["data-form"],
        info = {
            title: form["title"].value,
            subTitle: form["sub-title"].value,
            xTitle: form["x-title"].value,
            yTitle: form["y-title"].value,
            suffix: form["unit"].value,
            //数据对齐方式
            tableDataFormat: getTableDataFormat(),
            //饼图提示文字
            tip: $("#tipInput").val(),
        };

    return info;
}

function setUserConfig(config) {
    var form = document.forms["data-form"];

    config.title && (form["title"].value = config.title);
    config.subTitle && (form["sub-title"].value = config.subTitle);
    config.xTitle && (form["x-title"].value = config.xTitle);
    config.yTitle && (form["y-title"].value = config.yTitle);
    config.suffix && (form["unit"].value = config.suffix);
    config.dataFormat == "-1" && (form["charts-format"][1].checked = true);
    config.tip && (form["tip"].value = config.tip);
    currentChartType = config.chartType || 0;
}

function getSeriesAndCategories() {
    var form = document.forms["data-form"],
        series = [],
        categories = [],
        tmp = [],
        tableData = getTableData();

    //反转数据
    if (getTableDataFormat() === "-1") {
        for (var i = 0, len = tableData.length; i < len; i++) {
            for (var j = 0, jlen = tableData[i].length; j < jlen; j++) {
                if (!tmp[j]) {
                    tmp[j] = [];
                }

                tmp[j][i] = tableData[i][j];
            }
        }

        tableData = tmp;
    }

    categories = tableData[0].slice(1);

    for (var i = 1, data; (data = tableData[i]); i++) {
        series.push({
            name: data[0],
            data: data.slice(1),
        });
    }

    return {
        series: series,
        categories: categories,
    };
}

/*
 * 获取数据源数据对齐方式
 */
function getTableDataFormat() {
    var form = document.forms["data-form"],
        items = form["charts-format"];

    return items[0].checked ? items[0].value : items[1].value;
}

/*
 * 禁用非饼图类型的配置项
 */
function disableNotPieConfig() {
    updateConfigItem("disable");
}

/*
 * 启用非饼图类型的配置项
 */
function enableNotPieConfig() {
    updateConfigItem("enable");
}

function updateConfigItem(value) {
    var table = $("#showTable")[0],
        isDisable = value === "disable" ? true : false;

    //table中的input处理
    for (var i = 2, row; (row = table.rows[i]); i++) {
        for (var j = 1, cell; (cell = row.cells[j]); j++) {
            $("input", cell).attr("disabled", isDisable);
        }
    }

    //其他项处理
    $("input.not-pie-item").attr("disabled", isDisable);
    $("#tipInput").attr("disabled", !isDisable);
}

/*
 * 获取饼图数据
 * 饼图的数据只取第一行的
 **/
function getSeriesForPieChart() {
    var series = {
            type: "pie",
            name: $("#tipInput").val(),
            data: [],
        },
        tableData = getTableData();

    for (var j = 1, jlen = tableData[0].length; j < jlen; j++) {
        var title = tableData[0][j],
            val = tableData[1][j];

        series.data.push([title, val]);
    }

    return {
        series: [series],
    };
}

function getTableData() {
    var table = document.getElementById("showTable"),
        xCount = table.rows[0].cells.length - 1,
        values = getTableInputValue();

    for (var i = 0, value; (value = values[i]); i++) {
        tableData[Math.floor(i / xCount) + 1][(i % xCount) + 1] = values[i];
    }

    return tableData;
}

function getTableInputValue() {
    var table = document.getElementById("showTable"),
        inputs = table.getElementsByTagName("input"),
        values = [];

    for (var i = 0, input; (input = inputs[i]); i++) {
        values.push(input.value | 0);
    }

    return values;
}

function getCellValue(cell) {
    var value = utils.trim(cell.innerText || cell.textContent || "");

    return value
        .replace(new RegExp(UE.dom.domUtils.fillChar, "g"), "")
        .replace(/^\s+|\s+$/g, "");
}

//dialog确认事件
dialog.onok = function () {
    //收集信息
    var form = document.forms["data-form"],
        info = getUserConfig();

    //添加图表类型
    info.chartType = currentChartType;

    //同步表格数据到编辑器
    syncTableData();

    //执行图表命令
    editor.execCommand("charts", info);
};

/*
 * 同步图表编辑视图的表格数据到编辑器里的原始表格
 */
function syncTableData() {
    var tableData = getTableData();

    for (var i = 1, row; (row = editorTable.rows[i]); i++) {
        for (var j = 1, cell; (cell = row.cells[j]); j++) {
            cell.innerHTML = tableData[i][j];
        }
    }
}
